<template>
  <div>
    <el-card shadow="never">
      <div style="text-align: center;">
        选择日期：
        <el-date-picker size="small"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          v-model="dateValue"
          :value="dateValue"
          @change="changeDateValue" type="daterange"
          :picker-options="pickerOptionsdate"
          range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
        <el-button @click="search" class="button" size="small" round icon="el-icon-search">查询</el-button>
      </div>
    </el-card>
    <el-card shadow="never">
      <el-row>
        <el-col :span="12">
          <header-title title="客流分析展示数据"></header-title>
        </el-col>
        <el-col :span="12" style="text-align: right;height: 40px;">
          <el-radio-group v-model="type" style="margin-bottom: 30px;" @change="clickType">
            <el-radio-button v-show="hourIsShow" label="hour">时</el-radio-button>
            <el-radio-button label="day" style="border-left: 1px solid #dcdfe6;">日</el-radio-button>
            <el-radio-button label="week">周</el-radio-button>
            <el-radio-button label="month">月</el-radio-button>
            <el-radio-button label="year">年</el-radio-button>
          </el-radio-group>
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="never">
      <p style="margin: 0 0 20px 0;font-size: 16px;">客流分析展示</p>
      <div style="margin: 0 0 10px 50px;">
        <el-checkbox-group v-model="checkList" @change="changeCheckboxGroup">
          <el-checkbox label="1">去重客流</el-checkbox>
          <el-checkbox label="2">销售额(元)</el-checkbox>
          <el-checkbox label="3">订单数</el-checkbox>
          <el-checkbox label="4">客单价(元)</el-checkbox>
        </el-checkbox-group>
      </div>
      <chart :options="peopleNumberAnalyzeOptions" style="height: 300px;"></chart>
    </el-card>
    <el-card shadow="never">
      <p style="margin: 0 0 20px 0;font-size: 16px;">客流画像分析</p>
      <el-row :gutter="20">
        <el-col :span="12">
          <p style="margin: 10px 0;font-size: 15px;">男女比例环形图</p>
          <el-row>
            <el-col :span="14">
              <div style="position: relative">
                <chart :options="sexOptions" style="height: 300px;"></chart>
                <div style="position: absolute;left: 50%;top: 45%;text-align: center;height: 62px;transform: translate(-50%,-50%);">
                  <h4 style="color: rgba(0,0,0,.45);font-size: 14px;line-height: 22px;height: 22px;margin-bottom: 8px;font-weight: normal;">总人数</h4>
                  <div style="text-align: center;line-height: 31px;font-size: 22px;color: #8542e0;">{{totalNumber}}</div>
                </div>
              </div>
            </el-col>
            <el-col :span="10">
              <ul style="list-style: none;width: 200px;height: 248px;padding: 80px 0 0;">
                <li style="cursor: pointer;margin-bottom: 16px;height: 22px;line-height: 22px;">
                  <span style="border-radius: 8px;background-color: rgb(117, 188, 255);display: inline-block;margin-right: 8px;position: relative;top: -1px;height: 8px;width: 8px;"></span>
                  <span style="color: rgba(0,0,0,.65);display: inline-block;width: auto;min-width: 10px;">男</span>
                  <div style="position: relative;top: -.06em;display: inline-block;margin: 0 8px;vertical-align: middle;">|</div>
                  <span style="position: absolute;">
                    <span style="line-height: 22px;font-size: 14px;">{{maleNumber}}</span>
                  </span>
                </li>
                <li style="cursor: pointer;margin-bottom: 16px;height: 22px;line-height: 22px;">
                  <span style="border-radius: 8px;background-color: rgb(255, 146, 205);display: inline-block;margin-right: 8px;position: relative;top: -1px;height: 8px;width: 8px;"></span>
                  <span style="color: rgba(0,0,0,.65);display: inline-block;width: auto;">女</span>
                  <div style="position: relative;top: -.06em;display: inline-block;margin: 0 8px;vertical-align: middle;">|</div>
                  <span style="position: absolute;">
                    <span style="line-height: 22px;font-size: 14px;">{{femaleNumber}}</span>
                  </span>
                </li>
              </ul>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <p style="margin: 10px 0;font-size: 15px;">回头客分析环形图</p>
          <el-row>
            <el-col :span="14">
              <chart :options="frequencyAnalysisOptions" style="height: 300px;"></chart>
            </el-col>
            <el-col :span="10">
              <ul style="list-style: none;width: 200px;height: 248px;padding: 70px 0 0;">
                <li style="cursor: pointer;margin-bottom: 16px;height: 22px;line-height: 22px;">
                  <span style="border-radius: 8px;background-color: #facc15;display: inline-block;margin-right: 8px;position: relative;top: -1px;height: 8px;width: 8px;"></span>
                  <span style="color: rgba(0,0,0,.65);display: inline-block;width: auto;min-width: 10px;">新客占比</span>
                  <div style="position: relative;top: -.06em;display: inline-block;margin: 0 8px;vertical-align: middle;">|</div>
                  <span style="position: absolute;">
                    <span style="line-height: 22px;font-size: 14px;">{{newProportion}}</span>
                  </span>
                </li>
                <li style="cursor: pointer;margin-bottom: 16px;height: 22px;line-height: 22px;">
                  <span style="border-radius: 8px;background-color: #3dc2c2;display: inline-block;margin-right: 8px;position: relative;top: -1px;height: 8px;width: 8px;"></span>
                  <span style="color: rgba(0,0,0,.65);display: inline-block;width: auto;">低频回头客占比</span>
                  <div style="position: relative;top: -.06em;display: inline-block;margin: 0 8px;vertical-align: middle;">|</div>
                  <span style="position: absolute;">
                    <span style="line-height: 22px;font-size: 14px;">{{lowProportion}}</span>
                  </span>
                </li>
                <li style="cursor: pointer;margin-bottom: 16px;height: 22px;line-height: 22px;">
                  <span style="border-radius: 8px;background-color: #2990ff;display: inline-block;margin-right: 8px;position: relative;top: -1px;height: 8px;width: 8px;"></span>
                  <span style="color: rgba(0,0,0,.65);display: inline-block;width: auto;">高频回头客占比</span>
                  <div style="position: relative;top: -.06em;display: inline-block;margin: 0 8px;vertical-align: middle;">|</div>
                  <span style="position: absolute;">
                    <span style="line-height: 22px;font-size: 14px;">{{highProportion}}</span>
                  </span>
                </li>
              </ul>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="never">
      <p style="margin: 20px 0;font-size: 15px;">客流分析表</p>
      <el-table :data="peopleNumberData" style="width: 100%;margin: 10px 30px 10px;">
        <el-table-column prop="time" label="时间"></el-table-column>
        <el-table-column prop="totalNumber" label="去重客流"></el-table-column>
        <el-table-column prop="weighingSaleAmount" label="销售额(元)"></el-table-column>
        <el-table-column prop="weighingPayNumber" label="订单数"></el-table-column>
        <el-table-column prop="clientUnitPrice" label="客单价(元)"></el-table-column>
        <el-table-column prop="maleNumber" label="男"></el-table-column>
        <el-table-column prop="femaleNumber" label="女"></el-table-column>
        <div slot="empty"><img src="../../../assets/blank_tip_page/blank_tip_page.png" alt=""></div>
      </el-table>
      <el-pagination
        :page-size="perPage"
        :current-page="page"
        :total="total"
        @current-change="changePage"
        style="margin-top: 15px;"
        background
        layout="prev, pager, next"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
import Chart from '@/components/Charts'
import { formatDate } from "@/utils"
import { mapState } from 'vuex'
export default {
  name: 'MarketPNSearch',
  components: {
     Chart
  },
  data(){
    return {
      dateValue: [formatDate(new Date()),formatDate(new Date())], // 选择日期
      // 选择日期 的限制
      pickerOptionsdate: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6
        }
      },
      type: 'hour', // string	true	标识	hour 小时 day 天 week 周 month 月 year 年
      hourIsShow: true, // 是否显示 时 选择器
      startTime: formatDate(new Date()), //	date	true	开始时间
      endTime: formatDate(new Date()), //	date	true	结束时间
      checkList: ['1', '2'], // 选了几项   1. 去重客流 2.销售额 3.订单数 4.客单价

      // 男女比例环形图
      femaleNumber: 0, // int	女客总数
      maleNumber: 0, // int	男客总数
      totalNumber: 0, // int	人流量总数

      // 回头客分析环形图
      new: 0, //	int	新客
      newProportion: '', //	string	新客占比
      low: 0, //	int	低频回头客
      lowProportion: '', //	string	低频回头客占比
      high: 0, //	int	高频回头客
      highProportion: '', //	string	高频回头客占比

      peopleNumberData: [],
      perPage: 10, // 每页显示10条
      page: 1, // 当前页
      total: 0
    }
  },
  watch: {
    '$store.state.app.marketId'(val, oldVal){
      // 客流分析展示图
      this.getMarketPeopleNumber(this.type,this.checkList,this.startTime,this.endTime)
      // 男女比例环形图
      this.getSexPieData(this.startTime, this.endTime)
      // 回头客分析环形图
      this.getFrequencyAnalysisPieData(this.startTime, this.endTime)
      // 客流分析表
      this.getPeopleNumberData(this.type,this.startTime,this.endTime,this.perPage,this.page)
    }
  },
  mounted(){
    // 客流分析展示图
    this.getMarketPeopleNumber(this.type,this.checkList,this.startTime,this.endTime)
    // 男女比例环形图
    this.getSexPieData(this.startTime, this.endTime)
    // 回头客分析环形图
    this.getFrequencyAnalysisPieData(this.startTime, this.endTime)
    // 客流分析表
    this.getPeopleNumberData(this.type,this.startTime,this.endTime,this.perPage,this.page)
  },
  computed: {
    // 回访活跃度分析
    ...mapState('peopleNumber',['peopleNumberAnalyzeOptions', 'sexOptions', 'frequencyAnalysisOptions'])
  },
  methods:{
    // 改变日期
    changeDateValue(date){
      this.startTime = formatDate(date[0])
      this.endTime = formatDate(date[1])
      if(this.startTime !== this.endTime){
        this.hourIsShow = false
        this.type = 'day'
      }else if(this.startTime === this.endTime){
        this.hourIsShow = true
      }
    },
    clickType(tab){
      this.type = tab
    },
    changeCheckboxGroup(checkList){
      if(checkList.length > 2){
        this.$message({
          type: 'warning',
          message: '最多选择两项对比！'
        })
      }
      this.checkList = checkList.sort()
      this.getMarketPeopleNumber(this.type,this.checkList,this.startTime,this.endTime)
    },
    search(){
      // 客流分析展示图
      this.getMarketPeopleNumber(this.type,this.checkList,this.startTime,this.endTime)
    },
    // 客流分析展示图
    getMarketPeopleNumber(type,checkList,startTime,endTime){
      this.$store.dispatch('peopleNumber/fetchPeopleNumberLineCharts', {type,checkList,startTime,endTime})
    },
    // 男女比例环形图
    getSexPieData(startTime, endTime){
      this.$store.dispatch('peopleNumber/fetchSexPieData', {startTime,endTime}).then(
        data => {
          this.femaleNumber = data.femaleNumber
          this.maleNumber = data.maleNumber
          this.totalNumber = data.totalNumber
        }
      ).catch(err => {})
    },
    // 回头客分析环形图
    getFrequencyAnalysisPieData(startTime, endTime){
      this.$store.dispatch('peopleNumber/fetchFrequencyAnalysisPieData', {startTime,endTime}).then(
        data => {
          this.new = data.new
          this.newProportion = data.newProportion
          this.low = data.low
          this.lowProportion = data.lowProportion
          this.high = data.high
          this.highProportion = data.highProportion
        }
      ).catch(err => {})
    },
    // 客流分析表
    getPeopleNumberData(type,startTime,endTime,perPage,page){
      this.$store.dispatch('peopleNumber/fetchPeopleNumberData', {type,startTime,endTime,perPage,page}).then(
        data => {
          this.peopleNumberData = data.items
          this.total = data.total
        }
      ).catch(err => {
        this.peopleNumberData = []
        this.total = 0
      })
    },
    changePage(num){
      this.page = num
      this.getPeopleNumberData(this.type,this.startTime,this.endTime,this.perPage,num)
    }
  }
}
</script>

<style lang="scss" scoped>
  /deep/ .el-table__empty-text{
    width: 100%;
  }
.button {
  background: #64d9d6;
  color: #fff;
  margin-left: 40px;
}
</style>
